<template>
  <div>
    <div class="top">
      <!-- 轮播图结结构 -->
      <div class="block">
        <el-carousel trigger="click" height="5rem" width="3rem">
          <el-carousel-item v-for="item in carouselList" :key="item.id">
            <div class="carousel" @click="toParticulars(item)">
              <span>{{ item.title }}</span>
              <img
                style="width: 100%; height: 100%; font-size: 20px"
                :src="item.image"
                :alt="item.title"
              />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="rightBox">
        <div class="rightTop">
          <img src="http://jindu.dlztc.com/img/drug-new1.41426876.png" />
          <div @click="toParticulars(topTitle)">{{ topTitle.title }}</div>
        </div>
        <!-- 右侧要闻 -->
        <div class="rightBottom">
          <ul>
            <li
              v-for="list in newsList"
              :key="list.id"
              @click="toParticulars(list)"
            >
              <i class="el-icon-d-arrow-right"></i>
              <div class="text">
                <router-link to="" :title="list.title">{{
                  list.title | filterDetails
                }}</router-link>
                <div class="data">{{ list.releaseTime | filterDay }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Center",
  data() {
    return {
      // 轮播图数据
      carouselList: [],
      // 置顶新闻
      newsList: [],
      // 置顶title
      topTitle: {},
    };
  },
  mounted() {
    this.getNewList();
  },
  methods: {
    async getNewList() {
      let data = {
        pageNum: 1,
        pageSize: 100,
      };
      let result = await this.$API.receptionist.reqGetNewList(data);
      if (result.status == 200) {
        // 过滤轮播图数据
        this.carouselList = result.data.records.filter((item) => {
          if (item.carouselStatus == 2) {
            return item;
          }
        });
        // 过滤置顶新闻数据
        let arr = result.data.records.filter((item) => {
          if (item.topStatus == 2) {
            return item;
          }
        });
        this.topTitle = arr[0];
        this.newsList = arr.slice(1, 9);
      }
    },
    // 进入详情页的回调
    async toParticulars(row) {
      console.log(1, row);
      if (row.privacy == 2) {
        this.$prompt("请输入密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /\S/,
          inputErrorMessage: "密码不能为空",
          inputType: "text",
        })
          .then(async ({ value }) => {
            let data = {
              id: row.id,
              pwd: value,
            };
            let result = await this.$API.receptionist.isNewsPrivacy(data);
            if (result.status == 200) {
              let time =
                row.releaseTime.slice(0, 11) + row.releaseTime.slice(11, 19);
              this.$router.push({
                path: "particular",
                query: {
                  title: row.title,
                  creator: row.creator,
                  releaseTime: time,
                  article: result.data,
                },
              });
            } else {
              this.$message({
                type: "info",
                message: "密码错误",
              });
            }
          })
          .catch(() => {});
      } else {
        let data = {
          id: row.id,
        };
        let results = await this.$API.receptionist.isNewsPrivacy(data);
        if (results.status == 200) {
          let timer =
            row.releaseTime.slice(0, 11) + row.releaseTime.slice(11, 19);
          this.$router.push({
            path: "particular",
            query: {
              title: row.title,
              creator: row.creator,
              releaseTime: timer,
              article: results.data,
            },
          });
        }
      }
    },
  },
  filters: {
    // 过滤 超过18个字转换为...
    filterDetails(val) {
      if (val.length > 19) {
        return val.slice(0, 20) + "...";
      }
      return val;
    },
    filterDay(val) {
      if (val.length > 7) {
        return val.slice(0, 7);
      }
      return val;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
::v-deep.el-carousel__arrow {
  width: 40px;
  height: 60px;
  border-radius: 0px;
  border: 1px;
}
.top {
  display: flex;
  .block {
    width: 60%;
    margin-left: 10px;
    .carousel {
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        margin-top: 8px;
        padding: 5px 5px 5px 40px;
        color: white;
        font-size: 0.3rem;
        width: 8.5rem;
        position: absolute;
        z-index: 300;
        background-color: rgba(113, 200, 240, 0.5);
      }
    }
  }
  .rightBox {
    width: 40%;
    height: 5rem;
    background-color: #eef3f3;
    .rightTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        margin-left: 10px;
      }
      div {
        width: 100%;
        font-size: 0.3rem;
        font-weight: 600;
        color: #142c8e;
        text-align: center;
      }
    }
    .rightBottom {
      ul {
        margin: 0;
        padding: 0;
        font-size: 0.28rem;
        li {
          cursor: pointer;
          margin: 0.12rem;
          list-style: none;
          display: flex;
          i {
            width: 5%;
            margin: 0px 5px 0px 5px;
          }
          .text {
            width: 7rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            a {
              font-weight: 100;
            }
            .data {
              color: #aaaaac;
            }
          }
        }
        li:hover {
          background-color: #3d9cd6;
          color: white;
          .data {
            color: #aaaaac;
          }
        }
      }
    }
  }
}
</style>
